import React, {Component} from 'react'
import { Menu, Icon, Button } from 'antd'
import { connect } from 'react-redux'
import arr from './config'

const mapStateToProps = state => ({ routerIndex: state.routerIndex })



class NavApp extends Component{
  handleCilck = (e) => {
    const index = Number(e.key) - 1
    if (e.key === this.props.routerIndex[0]) {
      return
    }
    window.location.href = `./#${arr[index].url}`
  }
  changeIndex = () => {
    if(Number(this.props.routerIndex[0]) === arr.length ) { 
      this.handleCilck({
        key: '1'
      })
    } else {
      const index = Number(this.props.routerIndex[0]) + 1
      this.handleCilck({key: `${index}`})
    }
  }

  render() {
    return (
      <div>
        <Button onClick={this.changeIndex} type="primary">
          next
        </Button>
        <Menu
          theme="dark"
          onClick={this.handleCilck}
          selectedKeys={this.props.routerIndex}
        >
        {arr.map(d => (
          <Menu.Item key={d.key}>
            <Icon type="pie-chart" />
            <span>{d.text}</span>
          </Menu.Item>
        ))}
        </Menu>
      </div>
    )
  }
}

export default connect(mapStateToProps)(NavApp)